<template>
    <basic-container>
        <el-tabs v-model="tabActiveName" @tab-click="handleClick">
            <el-tab-pane :label=newOrderAmount name="first">
            </el-tab-pane>
            <el-tab-pane :label=newOrderNum name="second">
            </el-tab-pane>
            <el-tab-pane :label=avgPrice name="third">
            </el-tab-pane>
            <el-tab-pane :label=completeOrderAmount name="Fourth">
            </el-tab-pane>
            <el-tab-pane :label=refundOrderAmount name="Fifth">
            </el-tab-pane>
        </el-tabs>
        <el-row style="padding: 10px 20px">
            <el-radio-group v-model="timeSize" size="small" @change="changeTimeSize">
                <el-radio-button label="2">前日</el-radio-button>
                <el-radio-button label="7">最近7天</el-radio-button>
                <el-radio-button label="30">最近30天</el-radio-button>
            </el-radio-group>
            <span style="margin-left: 10px">时间筛选: </span>
            <el-date-picker placeholder="开始时间" @change="getBeforeTime" value-format="yyyy-MM-dd" v-model="beginTime" type="date" size="mini">
            </el-date-picker>

            <span style="margin-left:10px">-</span>
            <el-date-picker style="margin-left: 10px" placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd" v-model="endTime" type="date" size="mini">
            </el-date-picker>

            <el-button style="margin-left: 10px" type="primary" size="mini" plain @click.stop="search()">搜索</el-button>
            <el-button style="margin-left: 10px" type="primary" size="mini" plain @click.stop="clear()">清空</el-button>
        </el-row>

<!--        <avue-echart-line :theme="theme" :option="option" :data="data" width="1200"></avue-echart-line>-->
        <div ref="myEcharts" style="width: 100%;height: 500px;"></div>
        <avue-crud :data="orderStatisticsResult" :option="option2" :row-style="rowStyle" >
        </avue-crud>
    </basic-container>
</template>
<script>
    import {
        getList
    } from "@/api/base/reportCenter/seller/orderStatistics";
    import {onlyDateFormat} from '@/util/date.js'

    export default {
        data() {
            return {
                timeSize:'',//时间跨度
                fillColor:'#73A0C8',
                theme:'',
                tabActiveName: 'first', //tab页切换
                newOrderAmount:'新增订单额',
                newOrderNum:'新增订单数',
                avgPrice:'平均单价',
                completeOrderAmount:'订单完成额',
                refundOrderAmount:'退款订单额',
                newOrderAmountArray:[],
                newOrderNumArray:[],
                avgPriceArray:[],
                completeOrderAmountArray:[],
                refundOrderAmountArray:[],
                beginTime: '',
                endTime: '',
                categories: [],
                orderStatisticsResult: [],
                option: {
                    switchTheme:true,
                    width: 1200,
                    height: 600,
                    title: '手机大比拼',
                    smooth: true,//是否顺滑
                    //areaStyle: true,//是否面积
                },

                option2:{
                    excelBtn: true,
                    selection: true,
                    title:'交易数据',
                    menuType:'text',
                    index:true,
                    page:false,
                    align:'center',
                    dateDefault:true,
                    menuAlign:'center',
                    menu: false,
                    addBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    column:[
                        {
                            label: "日期",
                            prop: "statisticalTime",
                            type: "date",
                            format: "yyyy-MM-dd",
                            valueFormat: "yyyy-MM-dd",
                        },
                        {
                            label:'新增订单金额',
                            prop:'newOrderAmount'
                        },
                        {
                            label:'新增订单数量',
                            prop:'newOrderNum'
                        },
                        {
                            label:'平均单价',
                            prop:'avgPrice'
                        }, {
                            label:'已完成订单数量',
                            prop:'completeOrderNum'
                        }, {
                            label:'已完成订单金额',
                            prop:'completeOrderAmount'
                        },
                        {
                            label:'已退款订单数量',
                            prop:'refundOrderNum'
                        },
                        {
                            label:'已退款订单金额',
                            prop:'refundOrderAmount'
                        },
                        {
                            label:'已取消订单数量',
                            prop:'cancelOrderNum'
                        },
                        {
                            label:'已取消订单金额',
                            prop:'cancelOrderAmount'
                        },
                    ]
                }
            }
        },
        mounted() {
            this.transferMethod()
        },
        methods: {
            // 选择时间跨度
            changeTimeSize(value) {
                let date = Date.now() - value*24*60*60*1000
                this.endTime = onlyDateFormat(new Date())
                this.beginTime = onlyDateFormat(new Date(date))
                this.transferMethod()
            },
            handleClick(tab) {
                this.tabname = tab.name
                let mychart = this.$ECHARTS.init(this.$refs.myEcharts)
                //tab页切换
                if (tab.name == "first") {
                    let options = {
                        title: {
                            text: '新增订单额',   //图表顶部的标题
                        },
                        tooltip: {   //鼠标悬浮框的提示文字
                            trigger: 'axis'
                        },
                        xAxis : [{  //x轴坐标数据
                            type : 'category',
                            boundaryGap : true,
                            data : this.categories
                        }],
                        yAxis : [{   //y轴坐标数据
                            type : 'value',
                            data : this.newOrderAmountArray
                        }],
                        series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                            {
                                name:"新增订单额",
                                type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                smooth:true,
                                data: this.newOrderAmountArray,
                            }
                        ]}
                    mychart.setOption(options);
                } else if (tab.name == "second") {
                    let options = {
                        title: {
                            text: '新增订单数',   //图表顶部的标题
                        },
                        tooltip: {   //鼠标悬浮框的提示文字
                            trigger: 'axis'
                        },
                        xAxis : [{  //x轴坐标数据
                            type : 'category',
                            boundaryGap : true,
                            data : this.categories
                        }],
                        yAxis : [{   //y轴坐标数据
                            type : 'value',
                            data : this.newOrderNumArray
                        }],
                        series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                            {
                                name:"新增订单数",
                                type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                smooth:true,
                                data: this.newOrderNumArray,
                            }
                        ]}
                    mychart.setOption(options);
                } else if (tab.name == "third") {
                    let options = {
                        title: {
                            text: '平均单价',   //图表顶部的标题
                        },
                        tooltip: {   //鼠标悬浮框的提示文字
                            trigger: 'axis'
                        },
                        xAxis : [{  //x轴坐标数据
                            type : 'category',
                            boundaryGap : true,
                            data : this.categories
                        }],
                        yAxis : [{   //y轴坐标数据
                            type : 'value',
                            data : this.avgPriceArray
                        }],
                        series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                            {
                                name:"平均单价",
                                type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                smooth:true,
                                data: this.avgPriceArray,
                            }
                        ]}
                    mychart.setOption(options);
                } else if (tab.name == "Fourth") {
                    let options = {
                        title: {
                            text: '订单完成额',   //图表顶部的标题
                        },
                        tooltip: {   //鼠标悬浮框的提示文字
                            trigger: 'axis'
                        },
                        xAxis : [{  //x轴坐标数据
                            type : 'category',
                            boundaryGap : true,
                            data : this.categories
                        }],
                        yAxis : [{   //y轴坐标数据
                            type : 'value',
                            data : this.completeOrderAmountArray
                        }],
                        series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                            {
                                name:"订单完成额",
                                type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                smooth:true,
                                data: this.completeOrderAmountArray,
                            }
                        ]}
                    mychart.setOption(options);
                } else if (tab.name == "Fifth") {
                    let options = {
                        title: {
                            text: '退款订单额',   //图表顶部的标题
                        },
                        tooltip: {   //鼠标悬浮框的提示文字
                            trigger: 'axis'
                        },
                        xAxis : [{  //x轴坐标数据
                            type : 'category',
                            boundaryGap : true,
                            data : this.categories
                        }],
                        yAxis : [{   //y轴坐标数据
                            type : 'value',
                            data : this.refundOrderAmountArray
                        }],
                        series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                            {
                                name:"退款订单额",
                                type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                smooth:true,
                                data: this.refundOrderAmountArray,
                            }
                        ]}
                    mychart.setOption(options);
                }
            },

            getBeforeTime(){
                if(this.endTime){
                    if (this.beginTime > this.endTime) {
                        this.$message({
                            type: "error",
                            message: "开始时间不能大于结束时间"
                        });
                        this.beginTime = ''
                    }
                }
            },

            getTime() {
                if (this.beginTime > this.endTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.endTime = ''
                }
            },
            search(){
                this.newOrderAmount ='新增订单额',
                this.newOrderNum ='新增订单数',
                this.avgPrice ='平均单价',
                this.completeOrderAmount ='订单完成额',
                this.refundOrderAmount ='退款订单额',
                this.transferMethod(this.tabname)
            },
            clear(){
                this.beginTime = '';
                this.endTime = '';
                this.newOrderAmount ='新增订单额',
                this.newOrderNum ='新增订单数',
                this.avgPrice ='平均单价',
                this.completeOrderAmount ='订单完成额',
                this.refundOrderAmount ='退款订单额',
                this.transferMethod(this.tabname)
            },
            transferMethod(name){
                /*if(this.beginTime){
                    this.beginTime = new Date(new Date().getTime() - 24*60*60*1000); //前一天
                }*/
                let mychart = this.$ECHARTS.init(this.$refs.myEcharts)
                this.newOrderAmount = '新增订单额';
                this.newOrderNum = '新增订单数';
                this.avgPrice = '平均单价';
                this.completeOrderAmount = '订单完成额';
                this.refundOrderAmount = '退款订单额';
                let beginTimeStr = this.beginTime === null ? "" : this.beginTime;
                let endTimeStr = this.endTime === null ? "" : this.endTime;
                getList(beginTimeStr, endTimeStr).then(res => {
                    if(res.data.code == 200){
                        let obj = res.data.data.orderStatisticsResult;
                        this.orderStatisticsResult = obj;
                        let newArrayStatTime = [];
                        let newArrayOrderAmount = [];
                        let newArrayOrderNum = [];
                        let newArrayAvgPrice = [];
                        let newArrayCompleteOrderAmount = [];
                        let newArrayRefundOrderAmount = [];
                        //订单的数量信息
                        let tempData = res.data.data;
                        console.log('template:',tempData)
                        this.newOrderAmount = this.newOrderAmount + '(' +tempData.newOrderAmount + ')';
                        this.newOrderNum = this.newOrderNum + '(' +tempData.newOrderNum +')';
                        this.avgPrice = this.avgPrice + '(' +tempData.avgPrice +')';
                        this.completeOrderAmount = this.completeOrderAmount + '(' +tempData.completeOrderAmount +')';
                        this.refundOrderAmount = this.refundOrderAmount + '(' +tempData.refundOrderAmount +')';
                        if(obj.length>0){
                            for (let i = 1; i <= obj.length; i++) {
                                let index = obj.length - i;
                                newArrayStatTime.push(obj[index].xDataTime);
                                newArrayOrderAmount.push(obj[index].newOrderAmount);
                                newArrayOrderNum.push(obj[index].newOrderNum);
                                newArrayAvgPrice.push(obj[index].avgPrice);
                                newArrayCompleteOrderAmount.push(obj[index].completeOrderAmount);
                                newArrayRefundOrderAmount.push(obj[index].refundOrderAmount);
                            }
                        }
                        //时间坐标
                        this.categories = newArrayStatTime;
                        //新增订单额
                        this.newOrderAmountArray = newArrayOrderAmount;
                        //新增订单数
                        this.newOrderNumArray = newArrayOrderNum;
                        //平均单价
                        this.avgPriceArray = newArrayAvgPrice;
                        //订单完成额
                        this.completeOrderAmountArray = newArrayCompleteOrderAmount;
                        //退款订单额
                        this.refundOrderAmountArray = newArrayRefundOrderAmount;
                        this.handleClick({name:this.tabActiveName})
                        console.log(res.data.data)
                        console.log('新增订单额',newArrayStatTime);
                        let options = {};
                        switch (name) {
                            case 'first':
                                options = {
                                    title: {
                                        text: '新增订单额',   //图表顶部的标题
                                    },
                                    tooltip: {   //鼠标悬浮框的提示文字
                                        trigger: 'axis'
                                    },
                                    xAxis : [{  //x轴坐标数据
                                        type : 'time',
                                        boundaryGap : true,
                                        data : newArrayStatTime
                                    }],
                                    yAxis : [{   //y轴坐标数据
                                        type : 'value',
                                        data:newArrayOrderAmount
                                    }],
                                    series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                                        {
                                            name:"新增订单额",
                                            type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                            smooth:true,
                                            data:newArrayOrderAmount,
                                        }
                                    ]}
                                mychart.setOption(options);
                                break;
                            case 'second':
                                options = {
                                    title: {
                                        text: '新增订单数',   //图表顶部的标题
                                    },
                                    tooltip: {   //鼠标悬浮框的提示文字
                                        trigger: 'axis'
                                    },
                                    xAxis : [{  //x轴坐标数据
                                        type : 'category',
                                        boundaryGap : true,
                                        data : newArrayStatTime
                                    }],
                                    yAxis : [{   //y轴坐标数据
                                        type : 'value',
                                        data: newArrayOrderNum
                                    }],
                                    series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                                        {
                                            name:"新增订单数",
                                            type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                            smooth:true,
                                            data: newArrayOrderNum,
                                        }
                                    ]}
                                mychart.setOption(options);
                                break;
                            case 'third':
                                options = {
                                    title: {
                                        text: '平均单价',   //图表顶部的标题
                                    },
                                    tooltip: {   //鼠标悬浮框的提示文字
                                        trigger: 'axis'
                                    },
                                    xAxis : [{  //x轴坐标数据
                                        type : 'category',
                                        boundaryGap : true,
                                        data : newArrayStatTime
                                    }],
                                    yAxis : [{   //y轴坐标数据
                                        type : 'value',
                                        data: newArrayAvgPrice
                                    }],
                                    series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                                        {
                                            name:"平均单价",
                                            type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                            smooth:true,
                                            data: newArrayAvgPrice,
                                        }
                                    ]}
                                mychart.setOption(options);
                                break;
                            case 'Fourth':
                                options = {
                                    title: {
                                        text: '订单完成额',   //图表顶部的标题
                                    },
                                    tooltip: {   //鼠标悬浮框的提示文字
                                        trigger: 'axis'
                                    },
                                    xAxis : [{  //x轴坐标数据
                                        type : 'category',
                                        boundaryGap : true,
                                        data : newArrayStatTime
                                    }],
                                    yAxis : [{   //y轴坐标数据
                                        type : 'value',
                                        data: newArrayCompleteOrderAmount
                                    }],
                                    series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                                        {
                                            name:"订单完成额",
                                            type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                            smooth:true,
                                            data: newArrayCompleteOrderAmount,
                                        }
                                    ]}
                                mychart.setOption(options);
                                break;
                            case 'Fifth':
                                options = {
                                    title: {
                                        text: '退款订单额',   //图表顶部的标题
                                    },
                                    tooltip: {   //鼠标悬浮框的提示文字
                                        trigger: 'axis'
                                    },
                                    xAxis : [{  //x轴坐标数据
                                        type : 'category',
                                        boundaryGap : true,
                                        data : newArrayStatTime
                                    }],
                                    yAxis : [{   //y轴坐标数据
                                        type : 'value',
                                        data: newArrayRefundOrderAmount
                                    }],
                                    series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                                        {
                                            name:"退款订单额",
                                            type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                            smooth:true,
                                            data: newArrayRefundOrderAmount,
                                        }
                                    ]}
                                mychart.setOption(options);
                                break;

                        }
                    }
                    else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                })
            },
            rowStyle({row,column,rowIndex}){
                if(rowIndex%2===0){
                    return {
                        backgroundColor:'#eee',
                        color:'black'
                    }
                }
            }
        }
    }
</script>
